var heightAdjustment = 0;
var profileLink = 'http://www.dotnetnuke.com/UserProfile/tabid/1542/userId/[ID]/Default.aspx';

if (usergroup.Country != 'United States') {
	heightAdjustment += 15;
}

var viewTitleContainer = Ti.UI.createView({
	top: 0, 
	left: 0, 
	width: viewDetailsContainer.size.width, 
	height: 170 + heightAdjustment - 40 //remove the 40 when you enable favorites
});
viewDetailsContainer.add(viewTitleContainer);

var viewTitleStacked = Ti.UI.createView({
	layout: 'vertical',
	top: 0,
	left: 0,
	width: viewTitleContainer.size.width,
	height: viewTitleContainer.size.height
});
viewTitleContainer.add(viewTitleStacked);

var ugName = Ti.UI.createLabel( {
	text : usergroup.Name,
	left : 0,
	top : 5,
	font: {fontSize:13, fontWeight:'bold'},
	color: '#fff'
});
viewTitleStacked.add(ugName);			

var ugLocation = Ti.UI.createLabel( {
	text : usergroup.City + ', ' + usergroup.Region,
	left : 0,
	top : 0,
	width: 160,
	font: {fontSize:12},
	color: '#fff'
});
viewTitleStacked.add(ugLocation);

if (usergroup.Country != 'United States') {
	var ugCountry = Ti.UI.createLabel( {
		text : usergroup.Country,
		left : 0,
		top : 0,
		width: 160,
		font: {fontSize:12},
		color: '#fff'
	});
	viewTitleStacked.add(ugCountry);
}

var ugUrl = Ti.UI.createLabel({
	top:0,
	left: 0,
	text: 'No Website Available',
	color: '#999',
	font: {
		fontSize:12, 
		fontFamily: 'Arial-ItalicMT'
	}
});

if (usergroup.Url != '') {
	ugUrl.text = 'View Group Website';
	ugUrl.color = DotNetNuke.linkColor;
	ugUrl.font = {fontSize: 12};
}
viewTitleStacked.add(ugUrl);

var viewLeaderStacked = Ti.UI.createView({
	width: 90,
	height: viewTitleContainer.size.height,
	layout: 'vertical',
	top: ugName.size.height,
	right: 0
});
viewTitleContainer.add(viewLeaderStacked);

var leaderLabel = Ti.UI.createLabel({
	text: 'Group Leader',
	top: 5,
	Width: 90,
	font: {fontSize:10, fontWeight:'bold'},
	color: '#ddf',
	textAlign: 'center'
});
viewLeaderStacked.add(leaderLabel);

var leaderPic = Ti.UI.createImageView({
	backgroundImage: usergroup.AvatarPath,
	width: 70,
	height: 70,
	top: 0
});
viewLeaderStacked.add(leaderPic);

var leaderName = Ti.UI.createLabel({
	text: usergroup.LeaderDisplayName,
	top: 0,
	width: 90,
	font: {fontSize:10},
	textAlign: 'center'
});
viewLeaderStacked.add(leaderName);

var social = Ti.UI.createView({
	top: 12,
	left: 0,
	backgroundColor: '#18244a',
	borderRadius: 5,
	borderColor: '#aaa',
	borderWidth: 1,
	height: 50,
	width: 185
});

viewTitleStacked.add(social);

var nextIconLeft = 5;

nextIconLeft = addSocialIcon(usergroup.GroupProfileUrl, 'images/dnnlogo.png', 'images/dnnlogo_off.png', nextIconLeft);

nextIconLeft = addSocialIcon(usergroup.FacebookUrl, 'images/facebook.png', 'images/facebook_off.png', nextIconLeft);

nextIconLeft = addSocialIcon(usergroup.TwitterUrl, 'images/twitter.png', 'images/twitter_off.png', nextIconLeft);

nextIconLeft = addSocialIcon(usergroup.LinkedInUrl, 'images/linkedin.png', 'images/linkedin_off.png', nextIconLeft);

var fav = Ti.UI.createImageView({
	top: 10,
	left: 0,
	image:'images/favorites_add.png'
});
//viewTitleStacked.add(fav);

var hr = Ti.UI.createImageView({
	top: 5,
	width: 280,
	image: 'images/hr.png'
});
viewDetailsContainer.add(hr);

ugUrl.addEventListener('click', function(e){
	var url = usergroup.Url;
	if (url.toLowerCase().substr(0,4) != 'http'){
		url = 'http://' + e.source.text; 
	} else {
		url = e.source.text;
	}
	
	DotNetNuke.openBrowser(url);
	
});


leaderPic.addEventListener('click', function(e){
	profileUrl = profileLink.replace('[ID]', usergroup.LeaderID);
	DotNetNuke.openBrowser(profileUrl);
});

function addSocialIcon(url, image, imageoff, iconLeft) {
	var icon = Ti.UI.createImageView({
		top: 5,
		left: iconLeft,
		width: 40,
		height: 40,
		backgroundImage: image
	});
	
	if (DotNetNuke.isValidURL(url)){
		icon.addEventListener('click', function(){
			DotNetNuke.openBrowser(url);
		});		
	} else {
		icon.backgroundImage = imageoff;
		icon.opacity = 0.01;
	}
	social.add(icon);
	return iconLeft + icon.size.width + 5;
};